<!DOCTYPE HTML>
<html>

<head>
    <title> 财务管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
    <div class="detail-page">
        <div class="detail-page-title">
            <h4>店铺续费列表</h4>
        </div>
        <div class="detail-section">
            <div class="detail-row">
                <div class="jx-search-container">
                    <form id="J_Form"
                          class="jx-form form-horizontal jx-form-thin bui-form-horizontal bui-form bui-form-field-container"
                          method="post" aria-disabled="false" action="" aria-pressed="false">
                        <input type="hidden" name="orderStatus" id="orderStatus" value="1" class="bui-form-field"
                               aria-disabled="false">
                        <div class="row ">
                            <div class="control-group span6">
                                <label class="control-label first">店铺ID:</label>
                                <div class="controls">
                                    <input type="text" class="control-text bui-form-field input-medium" name="account"
                                           aria-disabled="false">
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">店铺名称:</label>
                                <div class="controls">
                                    <input type="text" class="control-text bui-form-field" name=""
                                           aria-disabled="false" aria-pressed="false">
                                </div>
                            </div>
                            <div class="control-group span9">
                                <label class="control-label control-label-small">下单时间:</label>
                                <div class="controls">
                                    <input type="text" class="calendar "><span> - </span>
                                    <input type="text" class="calendar "><span> </span>
                                </div>
                            </div>
                            <div class="control-group span7">
                                <label class="control-label">订单号:</label>
                                <div class="controls">
                                    <input type="text" class="control-text bui-form-field" name=""
                                           aria-disabled="false" aria-pressed="false">
                                </div>
                            </div>

                            <div class="control-group span2 pull-right">
                                <button type="submit" class="jx-btn btn-default">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 表格 start-->
                <div id="tab"></div>
                <div id="panel" class="">
                    <div>
                        <div id="grid"></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <!-- 表格 end-->
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<!-- script start -->
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/form', 'bui/tab'], function (Grid, Data, Search, Form, Tab) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '序号',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '店铺ID',
                elCls: 'center',
                dataIndex: 'b',
                width: 100
            }, {
                title: '创建时间',
                elCls: 'center',
                dataIndex: 'c',
                width: 150
            }, {
                title: '状态',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '内容',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '店铺名称',
                elCls: 'center',
                dataIndex: 'f',
                width: 300
            }, {
                title: '店铺归属人手机',
                elCls: 'center',
                dataIndex: 'g',
                width: 150
            }, {
                title: '店铺归属人邮箱',
                elCls: 'center',
                dataIndex: 'h',
                width: 150
            }, {
                title: '订单金额',
                elCls: 'center',
                dataIndex: 'i',
                width: 100
            }, {
                title: '支付通道',
                elCls: 'center',
                dataIndex: 'j',
                width: 100
            }, {
                title: '支付号',
                elCls: 'center',
                dataIndex: 'k',
                width: 150
            }, {
                title: '操作',
                elCls: 'center',
                dataIndex: 'l',
                width: 100,
                renderer: function (value, obj) {
                    var editStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '查看详情',
                        text: '[ 详情 ] ',
                        href: 'templates/financial/financial-list/financial-detail.html'
                    });
                    return editStr;
                }
            }],
            data = [{
                a: '1222',
                b: 'JX0001',
                c: '2017-05-11 11:10:01',
                d: '已支付',
                e: '购买惠品店',
                f: '激想体育专营店上海店',
                g: '15900684377',
                h: 'tinsin@groupjx.com',
                i: '2999.00',
                j: '微信支付',
                k:'4718471744134'
            }];
        //初始化数据
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '编辑商品品牌',
                    width: 600,
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,
                // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                store: store
            }),
            form = new Form.Form({
                srcNode: '#J_Form'
            }),
            tab = new Tab.TabPanel({
                render: '#tab',
                elCls: 'nav-tabs',
                panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
//                 selectedEvent : 'mouseenter',//默认为click,可以更改事件
                autoRender: true,
                children: [{
                    id: '0',
                    title: '全部(1)',
                    value: '2',
                }, {
                    id: '1',
                    title: '已支付(1)',
                    value: '2',
                }, {
                    id: '2',
                    title: '未支付(0)',
                    value: '1',
                }]
            });
        var index = 0;
        tab.on('selectedchange', function (ev) {
            var item = ev.item;
            /*切换tab之后显示相应数据*/
            index = item.__attrVals.id;
            var status = item.__attrVals.value;
            doIt(status);
        });
        tab.setSelected(tab.getItemAt(0));
        function doIt(orderStatus) {
            $("#orderStatus").val(orderStatus);
            var form = new BUI.Form.HForm({
                srcNode: '#searchForm'
            }).render();
            //序列化成对象
            var obj = form.serializeToObject();
            obj.start = 0; //返回第一页
            store.load(obj);
            $("#panel").children("div").css("display", "block");
            tab.setSelected(tab.getItemAt(index));
            grid.render();
        }

        form.render();

        grid.render();

    });
</script>
<!-- script end -->

<body>

</html>
